<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- <cpn></cpn> -->
			<!-- <cpn></cpn> -->
			<cpnn></cpnn>
		</div>
		
		<script src="../utils/vue.js"></script>
		<script>
			//1、创建组件构造器
			var cc = Vue.extend({
				template:`
					<div>
						<p>我是自定义组件</p>
						<p style="color:red">我超级棒</p>
					</div>
				`
			});
			//2、注册组件（全局组件）
			// Vue.component('cpn', cc);
			
			var vm = new Vue({
				el:"#app",
				data:{
				},
				components:{
					cpnn:cc //局部组件
				}
			})
		</script>
	</body>
</html>
